<template>
	<view class="container">
		<view class="header">
			<view class="location" @click="selectionAddr">
				<image style="width: 24rpx" mode="widthFix" src="/static/index/location.png"></image>
				<view class="text">{{ district }}</view>
			</view>
			<view class="search" @click="jumpSearch">
				<u-icon name="search" color="#999999" size="16"></u-icon>
				请输入小区名称进行搜索
			</view>
		</view>
		<view class="swiper">
			<u-swiper :list="swiperList" indicator indicatorMode="line" circular></u-swiper>
		</view>
		<!-- 消息 -->
		<div class="info">
			<div class="img">
				<image style="width: 224rpx; height: 120rpx" mode="widthFix" src="/static/index/info.png"></image>
			</div>
			<div class="text">{{ (infoList[0] && infoList[0].title) || '暂无' }}</div>
		</div>
		<view class="condition">
			<view class="type">
				<view class="item" @click="changeHouseType(item.id)" :class="item.id === form.source ? 'active' : ''" v-for="item in condition.houseTypeList" :key="item.id">
					{{ item.name }}
				</view>
			</view>
			<view class="class">
				<view class="title">居室</view>
				<view class="list">
					<view class="item" @click="changeRoom(el.id)" :class="el.id === form.room ? 'actives' : ''" v-for="el in condition.room" :key="el.id">{{ el.name }}</view>
				</view>
			</view>
			<view class="class">
				<view class="title">面积(㎡)</view>
				<view class="list">
					<view class="item" @click="changeAcreage(el)" :class="el.id === form.acreageId ? 'actives' : ''" v-for="el in condition.acreage" :key="el.id">
						{{ el.name }}
					</view>
				</view>
			</view>
		</view>
		<view class="houseList" v-if="houseList.length">
			<HouseItem class="item" :item="item" v-for="item in houseList" :key="item.id" />
		</view>
		<view style="margin: 120rpx 0" v-else>
			<u-empty text="抱歉，没有找到相关户型" width="200rpx" textColor="#999" icon="/static/nodata1.png"></u-empty>
		</view>
		<u-loadmore status="nomore" v-if="isFinish&&form.currPage!=1" />
		<!-- <HouseList :houseList="houseList"/> -->
		<!-- 社区选择弹出框 -->
		<!-- @close="close" @open="open" -->
		<u-popup :show="showAddr" :round="10" mode="bottom" closeable @close="closePopup" >
			<SelectAddr ref="SelectAddrRef" @submitAddr="submitAddr" />
		</u-popup>
	</view>
</template>

<script>
import SelectAddr from './modules/selectAddr.vue';
import HouseItem from './modules/houstItem.vue';
// import HouseList from './modules/houseList.vue'
export default {
	components: {
		SelectAddr,
		HouseItem
		// HouseList
	},

	data() {
		return {
			form: {
				room: '0',
				acreageStart: '0',
				acreageEnd: '0',
				acreageId: '0',
				source: '0',
				skey: '',
				currPage:1,
				
			},
			isFinish:false,
			district: '',
			addresInfo:{},//地址信息 用于回显
			condition: {
				houseTypeList: [
					{
						name: '新家装修',
						id: '0'
					},
					{
						name: '旧房改造',
						id: '1'
					}
				],
				room: [
					{
						name: '全部',
						id: '0'
					},
					{
						name: '一居室',
						id: '1'
					},
					{
						name: '二居室',
						id: '2'
					},
					{
						name: '三居室',
						id: '3'
					},
					{
						name: '四居室及以上',
						id: '4'
					}
				],
				acreage: [
					{
						name: '全部',
						acreageStart: '0',
						acreageEnd: '0',
						id: '0'
					},
					{
						name: '60~80',
						acreageStart: '60',
						acreageEnd: '80',
						id: '1'
					},
					{
						name: '80~100',
						acreageStart: '80',
						acreageEnd: '100',
						id: '2'
					},
					{
						name: '100~120',
						acreageStart: '100',
						acreageEnd: '120',
						id: '3'
					},
					{
						name: '120及以上',
						acreageStart: '120',
						acreageEnd: '0',
						id: '4'
					}
				]
			},
			houseList: [],
			userInfo: {},
			showAddr: false,
			swiperList: [],
			houseType: '1',
			infoList: [] //消息通知
		};
	},
	onLoad() {
		this.isLogin();
		this.getSwiperList();
		// this.getAddress()
	},
	methods: {
		// 首页轮播图
		getSwiperList() {
			this.$api.get('/common/getAdvs').then((res) => {
				// console.log(res)
				// console.log(res.data.map(item=>item.shuff_img))
				this.swiperList = res.data.map((item) => item.shuff_img);
			});
			// 消息通知
			this.$api.get('/common/getFitNotices', { limit: 1 }).then((res) => {
				this.infoList = res.data;
			});
		},
		// 服务产品搜索
		getHouseList() {
			uni.showLoading({
				title: '加载中'
			})
			this.$api.post('/fit/search', { ...this.form }).then((res) => {
				console.log(res)
				uni.hideLoading()
				this.houseList = [...this.houseList,...res.data.list];
				this.form.currPage = res.data.currPage
				if(!res.data.length && this.form.currPage!=1){
					this.isFinish = true
				}
				
			});
		},
		// 修改房屋类型
		changeHouseType(e) {
			// console.log(e);
			// this.houseType = e;
			this.form.source = e;
			this.houseList=[]
			this.form.currPage=1
			this.getHouseList();
			
		},
		// 修改居室
		changeRoom(e) {
			this.form.room = e;
			// console.log(this.form);
			// 这边调取进行房屋搜索方法
			this.houseList=[]
			this.form.currPage=1
			this.getHouseList();
		},
		// 修改面积
		changeAcreage(e) {
			// console.log(e);
			this.form.acreageStart = e.acreageStart;
			this.form.acreageEnd = e.acreageEnd;
			this.form.acreageId = e.id;
			this.houseList=[]
			this.form.currPage=1
			// console.log(this.form);
			// 这边调取进行房屋搜索方法
			this.getHouseList();
		},
		// 选取地址
		selectionAddr() {
			this.showAddr = true;
			this.$nextTick(()=>{
				// console.log(this.$refs.SelectAddrRef)
				this.$refs.SelectAddrRef.initData(this.addresInfo)
			})
			
		},
		closePopup() {
			this.showAddr = false;
		},
		// 提交地址
		submitAddr(params) {
			// let that = this
			// console.log(params);
			// console.log(this.userInfo);
			this.$api.post('/fit/setUserLocation', { ...params, userId: this.userInfo.id }).then((res) => {
				// console.log(res);
				// console.log(res.retCode === '0000')
				if (res.retCode === '0000') {
					this.district = params.district;
					this.showAddr = false;
				}
			});
		},
		// 跳转搜做
		jumpSearch() {
			uni.navigateTo({
				url: '/pages/index/modules/search'
			});
		},
		// 获取首页定位
		getAddress(userId){
			this.$api.post('/fit/getFitUserLocation',{userId:userId}).then(res=>{
				console.log(res,'/fit/getFitUserLocation')
				this.addresInfo = res.data
				this.district = res.data.district
			})
		},
		onReachBottom() {
			console.log('11', this.form.currPage);
			this.form.currPage =this.form.currPage+1
			this.getHouseList()
			// this.form.currPage = this.form.currPage + 1;
			// this.getData(this.swiperCurrent);
		},
		// 检查是否登录
		isLogin() {
			let that = this;
			// 为了方便调试 后期会删除
			// #ifdef H5
			uni.setStorage({
				key: 'userInfo',
				data: {
					id: 12,
					openid: 'ochHD61BeCWQVk_U64jA5kHZfh4I',
					phone: '13008770370',
					nickname: '',
					del: 0,
					head_pic: 'head.png',
					create_time: '2023-12-27 21:34:28'
				},
				// 为了方便调试 后期会删除
				success: function () {
					console.log('success');
					uni.redirectTo({
						url: '../index/index'
					});
				}
			});
			// #endif
			uni.getStorage({
				key: 'userInfo',
				success(res) {
					// console.log(res)
					// console.log(res.data, '微信用户信息');
					that.userInfo = res.data;
					that.getHouseList();
					that.userId = res.data.id;
					that.getAddress(res.data.id)
					getApp().globalData.userInfo = res.data
					// that.userInfoWX = JSON.parse(res.data);
					// that.getOpenid(loginRes.code);
				},
				fail(err) {
					uni.redirectTo({
						url: '../login/index'
					});
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
page {
	background-color: #f7f7f8;
	// overflow-x: hidden;
}
.container {
	padding: 0 32rpx;
	// width: 98%;
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 28rpx 0;
		.location {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.text {
				margin-left: 12rpx;
			}
		}
		.search {
			width: 358rpx;
			padding: 0 30rpx;
			height: 64rpx;
			line-height: 64rpx;
			text-align: center;
			background-color: #fff;
			border-radius: 40rpx;
			color: #999999;
			font-size: 24rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}
	}
	.info {
		background-color: #fff;
		// border-right: 1px 16rpx #000;
		border-radius: 16rpx;
		margin: 30rpx 0;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 24rpx;
		font-weight: 500;
		color: #666666;
		.img {
			padding: 5rpx 5rpx;
		}
		.text {
			margin-left: 5rpx;
			width: 400rpx;
			white-space: nowrap; /* 防止换行 */
			overflow: hidden; /* 隐藏溢出部分 */
			text-overflow: ellipsis; /* 使用省略号表示被省略的内容 */
		}
	}
	.condition {
		background-color: #fff;
		border-radius: 16rpx;
		margin: 32rpx 0rpx;
		padding-bottom: 30rpx;
		.type {
			display: flex;
			justify-content: space-between;
			height: 80rpx;
			line-height: 80rpx;
			.item {
				width: 50%;
				text-align: center;
				background-color: #f7f7f8;
				// border-bottom: 2rpx solid #f00;
			}
			.active {
				background-color: #fff;
				border-top-left-radius: 16rpx;
				border-top-right-radius: 16rpx;
			}
		}
		.class {
			padding: 20rpx;
			.title {
				font-weight: 500;
				color: #333333;
				height: 44rpx;
				margin-bottom: 16rpx;
			}
			.list {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: wrap;
				// gap:24rpx;

				.item {
					color: #333333;
					line-height: 60rpx;
					font-size: 26rpx;
					height: 60rpx;
					padding: 0 30rpx;
					font-size: 26rpx;
					background-color: #f8f9fa;
					border-radius: 30rpx;
					margin-right: 24rpx;
					margin-bottom: 24rpx;
				}
				.active {
					background-color: #21b579;
				}
				.actives {
					background-color: #21b579;
					color: #fff;
				}
			}
		}
	}
	.houseList {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		// gap: 30rpx 24rpx;
		.item {
			box-sizing: border-box;
			width: calc(50% - 16rpx);
			// width: 50%;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 30rpx 16rpx;
			margin-right: 30rpx;
			margin-bottom: 30rpx;
			&:nth-child(2n) {
				margin-right: 0;
			}
		}
	}
}
</style>
